$(function (){

    $('ul').on('click','li',function(){
        if($(this).hasClass('taskDone')){
            $(this).remove();//remove that element from the html
            //$(this).empty();//clear empty all my children
        }else {
            $(this).addClass('taskDone');
        }
        //addClass
    });

    //event bubbling
    //
//    $('li').click(function(){
//
//        //this
//        $(this).addClass('taskDone');
//        //addClass
//        //hasClass('taskDone')
//        //removeClass('taskDone')
//    });

    $('#btnAddTask').click(function(){
           addTask();
//
    });

    $('#inputTask').keydown(function(event){

        if(event.keyCode === 13){
           addTask();
        }

    });


    function addTask(){
//       // $('#userInputValue').html()
//        $('#paragraph').html(userEnteredValue)

        var inputValue =  $('#inputTask').val();

        $('ul').append('<li>' +  inputValue +'</li>');

        // $('li')
        //$('<li>').html(inputValue).appendTo('ul');
        $('#inputTask').val('');
    }
});